<template>
  <div class="tenant-container">
    <div class="tenant-header">
      <el-image style="width: 100px; height: 100px" :src="require('@/assets/header_images/tenantManage.png')"></el-image>
      <div class="title">
        租户管理
        <div class="title-content">对多租户环境中不同租户进行资源隔离、权限控制、数据安全和个性化配置的统一管理</div>
      </div>
    </div>
    <div class="tenant-info">
      <div class="tenant-operate">
        <span class="keyword">关键词：</span>
        <el-input placeholder="请输入租户名、集群" style="width: 20%;" clearable v-model="searchKeyword" @input="handleSearch">
        </el-input>
        <!-- <el-button icon="el-icon-search" circle @click="handleSearch"></el-button> -->
        <div class="right-menu">
          <el-button style="width: 100px;background:#304156;color: #fff;" type="primary" plain
            @click="handleRefresh">刷新</el-button>
          <el-button style="width: 100px;background:#304156;color: #fff;" type="primary" plain
            @click="handleAddTenant">添加</el-button>
        </div>
        <el-button v-if="multipleMainTenantSelection.length" type="danger" @click="deleteSelectedRow"
          style="margin-left: 20px;">删除</el-button>
      </div>
      <div class="tenant-table">
        <el-table ref="multipleTable" tooltip-effect="dark" align="center" style="width: 100%" :data="tableData"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="60rem">
          </el-table-column>
          <el-table-column prop="tenantName" label="租户名" width="200rem">
          </el-table-column>
          <el-table-column prop="clusterZhname" label="集群" width="200rem">
          </el-table-column>
          <!--命名空间&&用户未见字段-->
          <!-- <el-table-column prop="createBy" label="命名空间" width="120rem"> -->
          <el-table-column prop="tenantName" label="命名空间" width="200rem">
          </el-table-column>
          <el-table-column prop="tenantDescription" label="描述" width="300rem">
          </el-table-column>
          <el-table-column prop="updateTime" label="创建时间" width="240rem">
          </el-table-column>
          <el-table-column prop="updateTime" label="操作" width="200rem">
            <template slot-scope="row">
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link" @click="ifChooseRow(row)">
                  更多<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="click" @click="handleLookTenant">查看</el-dropdown-item>
                  <el-dropdown-item command="update" @click="handleUpdateTenant"
                    style="color:#A1EEBD">编辑</el-dropdown-item>
                  <el-dropdown-item command="delete" @click="handleDeleteTenant"
                    style="color:#F56C6C">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>

        </el-table>
        <div style="margin-top: 10px; float: right;">
          <el-Pagination background layout="total, prev, pager, next, jumper" :page-size="tenantPagination.pageSize"
            :total="tenantPagination.total" :current-page.sync="tenantPagination.pageNum"
            @current-change="handleTenantPageChange" />
        </div>
      </div>
    </div>
    <div class="add-tenant">
      <div>
        <el-dialog :width="dialogWidth" :visible.sync="addTenantDialogVisible">

          <template v-slot:title>
            <span class="dialog-title">添加租户</span>
          </template>
          <el-form label-position="left" label-width="100px" class="form">
            <!-- 基本信息部分 -->
            <div class="section-title moveRight">基本信息</div>
            <div class="section-context">
              <el-form-item label="租户名称" required>
                <el-input v-model="addTenantForm.tenantName" class="input" placeholder="请输入租户名称"></el-input>
              </el-form-item>
              <span class="section-context-align"></span>
              <el-form-item label="租户描述" class="moveRight">
                <el-input v-model="addTenantForm.tenantDescription" class="input" style="margin-left: -10px;width: 82%;" placeholder="请输入租户信息描述"></el-input>
              </el-form-item>
            </div>

            <!-- 集群信息列表 -->
            <div class="section-title"><span style="color:red;">* </span>集群信息</div>
            <el-button class="dialog-button" @click="handleChooseClusterInfo">请选择集群信息</el-button>
            <!--点击后弹窗展示列表-->
            <el-dialog title="请选择集群信息" :width="dialogWidth" :visible.sync="chooseClusterDialogVisible" append-to-body>
              <el-table :data="clusterData" style="width: 100%" @selection-change="handleClusterSelectionChange"
                ref="Table">
                <el-table-column type="selection" width="50rem"></el-table-column>
                <el-table-column prop="clusterZhname" label="名称" width="150"></el-table-column>
                <el-table-column prop="clusterDescription" label="集群描述" width="180"></el-table-column>
                <el-table-column prop="clusterUrl" label="集群地址" width="180"></el-table-column>
                <el-table-column prop="updateTime" label="创建时间" width="180"></el-table-column>
              </el-table>
              <div style="margin-top: 10px; float: right;">
                <el-pagination background layout="total, prev, pager, next, jumper"
                  :page-size="clusterPagination.pageSize" :total="clusterPagination.total"
                  :current-page.sync="clusterPagination.pageNum" @current-change="handleClusterPageChange" />
              </div>
              <div style="height: 40px;"></div>
              <!-- 命名空间部分 -->
              <div v-if="selectedCluster" class="secondSection-title">命名空间</div>
              <div v-if="selectedCluster">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="CPU">
                      <el-input v-model="addTenantForm.tenantCpu" class="input"><template
                          v-slot:append>Core</template></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="内存限制">
                      <el-input v-model="addTenantForm.tenantMem" class="input"></el-input>
                    </el-form-item> -->
                  </el-col>
                  <el-col :span="1"></el-col>
                  <el-col :span="12">
                    <el-form-item label="内存">
                      <el-input v-model="addTenantForm.tenantMem" class="input"><template
                          v-slot:append>MB</template></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="内存预留">
                      <el-input v-model="addTenantForm.tenantMem" class="input"></el-input>
                    </el-form-item> -->
                  </el-col>
                </el-row>
                <span class="dialog-add">
                  <el-button type="primary" plain style="margin-right: 10px;">添加标签</el-button>
                  <el-button type="primary" plain>添加注释</el-button>
                </span>
                <span class="dialog-footer">
                  <el-button type="primary" size="small" @click="cancelChooseCluster">取消</el-button>
                  <el-button type="primary" size="small" @click="confirmChooseCluster">确定</el-button>
                </span>
              </div>
            </el-dialog>

            <!-- 租户关联集群信息部分 -->
            <div class="section-title moveRight">租户关联集群信息</div>
            <div class="section-context">
              <el-table :data="showConnectClusterData" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column prop="clusterZhname" label="名称" width="110"></el-table-column>
                <el-table-column prop="clusterDescription" label="集群描述" width="120"></el-table-column>
                <el-table-column prop="clusterUrl" label="集群地址" width="120"></el-table-column>
                <el-table-column prop="updateTime" label="创建时间" width="120"></el-table-column>
                <el-table-column prop="cpuLimit" label="cpu(核)" width="120">
                  <template slot-scope="scope">
                    {{ scope.row.cpuLimit }}
                  </template>
                </el-table-column>
                <el-table-column prop="memoryLimit" label="内存(MB)" width="130">
                  <template slot-scope="scope">
                    {{ scope.row.memoryLimit }}
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <!-- 用户信息部分，需要获取展示用户信息 -->
            <div class="section-title"><span style="color:red;">* </span>用户信息</div>
            <el-button class="dialog-button" @click="handleChooseUserInfo">请选择用户信息</el-button>
            <el-dialog title="请选择用户信息" :width="dialogWidth" :visible.sync="chooseUserDialogVisible" append-to-body>
              <el-table  :data="filteredUserData" style="width: 100%" @selection-change="handleUserSelectionChange">
                <el-table-column type="selection" width="50"></el-table-column>>
                <el-table-column prop="username" label="用户名" width="170rem"></el-table-column>
                <el-table-column prop="roleType" label="角色" width="170rem">

                  <template slot-scope="scope">
                    {{ getRoleTypeName(scope.row.roleType) }}
                  </template>
                </el-table-column>
                <el-table-column prop="userStatus" label="状态" width="170rem">

                  <template slot-scope="scope">
                    {{ getStatusName(scope.row.userStatus) }}
                  </template>
                </el-table-column>
                <el-table-column prop="updateTime" label="创建时间" width="170rem"></el-table-column>
              </el-table>
              <div style="margin-top: 10px; float: right;">
                <el-pagination background layout="total, prev, pager, next, jumper" :page-size="userPagination.pageSize"
                  :total="userPagination.total" :current-page.sync="userPagination.pageNum"
                  @current-change="handleUserPageChange" />
              </div>
              <div style="height: 40px;"></div>
              <span class="dialog-footer">
                <el-button type="primary" size="small" @click="cancelChooseUser">取消</el-button>
                <el-button type="primary" size="small" @click="confirmChooseUser">确定</el-button>
              </span>
            </el-dialog>

            <!-- 租户关联用户信息部分 -->
            <div class="section-title moveRight">租户关联用户信息</div>
            <div class="section-context">
              <el-table :data="showConnectUserData" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column prop="username" label="用户名" width="170"></el-table-column>
                <el-table-column prop="roleType" label="角色" width="170">

                  <template slot-scope="scope">
                    {{ getRoleTypeName(scope.row.roleType) }}
                  </template>
                </el-table-column>
                <el-table-column prop="userStatus" label="状态" width="170">

                  <template slot-scope="scope">
                    {{ getStatusName(scope.row.userStatus) }}
                  </template>
                </el-table-column>
                <el-table-column prop="updateTime" label="创建时间" width="170"></el-table-column>
              </el-table>
            </div>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" size="small" @click="cancelAddTenant">取消</el-button>
            <el-button type="primary" size="small" @click="confirmAddTenant">确定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
    <div class="update-tenant">
      <el-dialog :width="dialogWidth" :visible.sync="lookTenantDialogVisible">

        <template v-slot:title>
          <span class="dialog-title">查看租户信息</span>
        </template>
        <el-form label-position="left" label-width="100px" class="form">
          <!-- 基本信息部分 -->
          <div class="section-title">基本信息</div>
          <div class="section-context">
            <el-form-item label="租户名称">
              <el-input v-model="updateTenantForm.tenantName" class="input" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="租户描述">
              <el-input v-model="updateTenantForm.tenantDescription" class="input" :disabled="true"></el-input>
            </el-form-item>
          </div>

          <!-- 集群信息列表 -->
          <!-- <div class="section-title">集群信息</div> -->
          <!-- <el-button class="dialog-button" @click="handleChooseClusterInfo">请选择集群信息</el-button> -->
          <!--点击后弹窗展示列表-->
          <!-- <el-dialog title="请选择集群信息" :width="dialogWidth" :visible.sync="chooseClusterDialogVisible" append-to-body>
            <el-table :data="clusterData" style="width: 100%" @selection-change="handleClusterSelectionChange"
              ref="Table">
              <el-table-column type="selection" width="50rem"></el-table-column>
              <el-table-column prop="clusterZhname" label="名称" width="150"></el-table-column>
              <el-table-column prop="clusterDescription" label="集群描述" width="180"></el-table-column>
              <el-table-column prop="clusterUrl" label="集群地址" width="180"></el-table-column>
              <el-table-column prop="updateTime" label="创建时间" width="180"></el-table-column>
            </el-table>
            <div style="margin-top: 10px; float: right;">
              <el-pagination background layout="total, prev, pager, next, jumper"
                :page-size="clusterPagination.pageSize" :total="clusterPagination.total"
                :current-page.sync="clusterPagination.pageNum" @current-change="handleClusterPageChange" />
            </div>
            <div style="height: 40px;"></div>
            
            <div v-if="selectedCluster" class="secondSection-title">命名空间</div>
            <div v-if="selectedCluster">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="CPU限制">
                    <el-input v-model="updateTenantForm.tenantCpu" class="input"></el-input>
                  </el-form-item>
                  <el-form-item label="内存限制">
                    <el-input v-model="updateTenantForm.tenantMem" class="input"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="1"></el-col>
                <el-col :span="12">
                  <el-form-item label="CPU预留">
                    <el-input v-model="updateTenantForm.tenantCpu" class="input"></el-input>
                  </el-form-item>
                  <el-form-item label="内存预留">
                    <el-input v-model="updateTenantForm.tenantMem" class="input"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <span class="dialog-add">
                <el-button type="primary" plain style="margin-right: 10px;">添加标签</el-button>
                <el-button type="primary" plain>添加注释</el-button>
              </span>
              <span class="dialog-footer">
                <el-button type="primary" size="small" @click="cancelChooseCluster">取消</el-button>
                <el-button type="primary" size="small" @click="confirmChooseCluster">确定</el-button>
              </span>
            </div>
          </el-dialog>

           -->
          <!-- 租户关联集群信息部分 -->
          <div class="section-title">租户关联集群信息</div>
          <div class="section-context">
            <!--这个地方需要的是数组格式而不是detail的对象格式-->
            <el-table :data="gvKubeClusterData" style="width: 100%" @selection-change="handleSelectionChange">
              <el-table-column prop="clusterZhname" label="名称" width="110"></el-table-column>
              <el-table-column prop="clusterDescription" label="集群描述" width="120"></el-table-column>
              <el-table-column prop="clusterUrl" label="集群地址" width="120"></el-table-column>
              <el-table-column prop="updateTime" label="创建时间" width="120"></el-table-column>
              <el-table-column prop="cpuLimit" label="cpu(核)" width="120">
                <template slot-scope="scope">
                  {{ scope.row.cpuLimit }}
                </template>
              </el-table-column>
              <el-table-column prop="memoryLimit" label="内存(MB)" width="130">
                <template slot-scope="scope">
                  {{ scope.row.memoryLimit }}
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!-- 用户信息部分，需要获取展示用户信息 -->
          <!-- <div class="section-title">用户信息</div>
          <el-button class="dialog-button" @click="handleChooseUserInfo">请选择用户信息</el-button>
          <el-dialog title="请选择用户信息" :width="dialogWidth" :visible.sync="chooseUserDialogVisible" append-to-body>
            <el-table :data="userData" style="width: 100%" @selection-change="handleUserSelectionChange">
              <el-table-column type="selection" width="50"></el-table-column>>
              <el-table-column prop="username" label="用户名" width="170rem"></el-table-column>
              <el-table-column prop="roleType" label="角色" width="170rem">

                <template slot-scope="scope">
                  {{ getRoleTypeName(scope.row.roleType) }}
                </template>
              </el-table-column>
              <el-table-column prop="userStatus" label="状态" width="170rem">

                <template slot-scope="scope">
                  {{ getStatusName(scope.row.userStatus) }}
                </template>
              </el-table-column>
              <el-table-column prop="updateTime" label="创建时间" width="170rem"></el-table-column>
            </el-table>
            <div style="margin-top: 10px; float: right;">
              <el-pagination background layout="total, prev, pager, next, jumper" :page-size="userPagination.pageSize"
                :total="userPagination.total" :current-page.sync="userPagination.pageNum"
                @current-change="handleUserPageChange" />
            </div>
            <div style="height: 40px;"></div>
            <span class="dialog-footer">
              <el-button type="primary" size="small" @click="cancelChooseUser">取消</el-button>
              <el-button type="primary" size="small" @click="confirmChooseUser">确定</el-button>
            </span>
          </el-dialog> -->

          <!-- 租户关联用户信息部分 -->
          <div class="section-title">租户关联用户信息</div>
          <div class="section-context">
            <el-table :data="gvKubeUserData" style="width: 100%" @selection-change="handleSelectionChange">
              <el-table-column prop="username" label="用户名" width="170"></el-table-column>
              <el-table-column prop="roleType" label="角色" width="170">

                <template slot-scope="scope">
                  {{ getRoleTypeName(scope.row.roleType) }}
                </template>
              </el-table-column>
              <el-table-column prop="userStatus" label="状态" width="170">

                <template slot-scope="scope">
                  {{ getStatusName(scope.row.userStatus) }}
                </template>
              </el-table-column>
              <el-table-column prop="updateTime" label="创建时间" width="170"></el-table-column>
            </el-table>
          </div>
        </el-form>
        <!-- <span slot="footer" class="dialog-footer">
          <el-button type="primary" size="small" @click="cancelUpdateTenant">取消</el-button>
          <el-button type="primary" size="small" @click="confirmUpdateTenant">确定</el-button>
        </span> -->
      </el-dialog>
    </div>
    <div class="update-tenant">
      <el-dialog :width="dialogWidth" :visible.sync="updateTenantDialogVisible">

        <template v-slot:title>
          <span class="dialog-title">修改租户</span>
        </template>
        <el-form label-position="left" label-width="100px" class="form">
          <!-- 基本信息部分 -->
          <div class="section-title moveRight">基本信息</div>
          <div class="section-context">
            <el-form-item label="租户名称" required>
              <el-input v-model="updateTenantForm.tenantName" class="input"></el-input>
            </el-form-item>
            <el-form-item label="租户描述" class="moveRight">
              <el-input v-model="updateTenantForm.tenantDescription" class="input" style="margin-left: -10px;width: 82%;"></el-input>
            </el-form-item>
          </div>

          <!-- 集群信息列表 -->
          <!-- <div class="section-title">集群信息</div> -->
          <div class="section-title"><span style="color:red;">* </span>集群信息</div>
          <el-button class="dialog-button" @click="handleChooseClusterInfo">请选择集群信息</el-button>
          <!--点击后弹窗展示列表-->
          <el-dialog title="请选择集群信息" :width="dialogWidth" :visible.sync="chooseClusterDialogVisible" append-to-body>
            <el-table :data="clusterData" style="width: 100%" @selection-change="handleClusterSelectionChange"
              ref="Table">
              <el-table-column type="selection" width="50rem"></el-table-column>
              <el-table-column prop="clusterZhname" label="名称" width="150"></el-table-column>
              <el-table-column prop="clusterDescription" label="集群描述" width="180"></el-table-column>
              <el-table-column prop="clusterUrl" label="集群地址" width="180"></el-table-column>
              <el-table-column prop="updateTime" label="创建时间" width="180"></el-table-column>
            </el-table>
            <div style="margin-top: 10px; float: right;">
              <el-pagination background layout="total, prev, pager, next, jumper" :page-size="clusterPagination.pageSize"
                :total="clusterPagination.total" :current-page.sync="clusterPagination.pageNum"
                @current-change="handleClusterPageChange" />
            </div>
            <div style="height: 40px;"></div>
            <!-- 命名空间部分 -->
            <div v-if="selectedCluster" class="secondSection-title">命名空间</div>
            <div v-if="selectedCluster">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="CPU">
                    <el-input v-model="updateTenantForm.tenantCpu" class="input"><template
                        v-slot:append>Core</template></el-input>
                  </el-form-item>
                  <!-- <el-form-item label="内存限制">
                    <el-input v-model="updateTenantForm.tenantMem" class="input"></el-input>
                  </el-form-item> -->
                </el-col>
                <el-col :span="1"></el-col>
                <el-col :span="12">
                  <el-form-item label="内存">
                    <el-input v-model="updateTenantForm.tenantMem" class="input"><template
                        v-slot:append>MB</template></el-input>
                  </el-form-item>
                  <!-- <el-form-item label="内存预留">
                    <el-input v-model="updateTenantForm.tenantMem" class="input"></el-input>
                  </el-form-item> -->
                </el-col>
              </el-row>
              <span class="dialog-add">
                <el-button type="primary" plain style="margin-right: 10px;">添加标签</el-button>
                <el-button type="primary" plain>添加注释</el-button>
              </span>
              <span class="dialog-footer">
                <el-button type="primary" size="small" @click="cancelChooseCluster">取消</el-button>
                <el-button type="primary" size="small" @click="confirmChooseCluster">确定</el-button>
              </span>
            </div>
          </el-dialog>

          <!-- 租户关联集群信息部分 -->
          <div class="section-title moveRight">租户关联集群信息</div>
          <div class="section-context">
            <!--这个地方需要的是数组格式而不是detail的对象格式-->
            <el-table :data="gvKubeClusterData" style="width: 100%" @selection-change="handleSelectionChange">
              <el-table-column prop="clusterZhname" label="名称" width="110"></el-table-column>
              <el-table-column prop="clusterDescription" label="集群描述" width="120"></el-table-column>
              <el-table-column prop="clusterUrl" label="集群地址" width="120"></el-table-column>
              <el-table-column prop="updateTime" label="创建时间" width="120"></el-table-column>
              <el-table-column prop="cpuLimit" label="cpu(核)" width="120">
                <template slot-scope="scope">
                  {{ scope.row.cpuLimit }}
                </template>
              </el-table-column>
              <el-table-column prop="memoryLimit" label="内存(MB)" width="120">
                <template slot-scope="scope">
                  {{ scope.row.memoryLimit }}
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!-- 用户信息部分，需要获取展示用户信息 -->
          <div class="section-title"><span style="color:red;">* </span>用户信息</div>
          <el-button class="dialog-button" @click="handleChooseUserInfo">请选择用户信息</el-button>
          <el-dialog title="请选择用户信息" :width="dialogWidth" :visible.sync="chooseUserDialogVisible" append-to-body>
            <el-table :data="filteredUserData" style="width: 100%" @selection-change="handleUserSelectionChange">
              <el-table-column type="selection" width="50"></el-table-column>>
              <el-table-column prop="username" label="用户名" width="170rem"></el-table-column>
              <el-table-column prop="roleType" label="角色" width="170rem">

                <template slot-scope="scope">
                  {{ getRoleTypeName(scope.row.roleType) }}
                </template>
              </el-table-column>
              <el-table-column prop="userStatus" label="状态" width="170rem">

                <template slot-scope="scope">
                  {{ getStatusName(scope.row.userStatus) }}
                </template>
              </el-table-column>
              <el-table-column prop="updateTime" label="创建时间" width="170rem"></el-table-column>
            </el-table>
            <div style="margin-top: 10px; float: right;">
              <el-pagination background layout="total, prev, pager, next, jumper" :page-size="userPagination.pageSize"
                :total="userPagination.total" :current-page.sync="userPagination.pageNum"
                @current-change="handleUserPageChange" />
            </div>
            <div style="height: 40px;"></div>
            <span class="dialog-footer">
              <el-button type="primary" size="small" @click="cancelChooseUser">取消</el-button>
              <el-button type="primary" size="small" @click="confirmChooseUser">确定</el-button>
            </span>
          </el-dialog>

          <!-- 租户关联用户信息部分 -->
          <div class="section-title moveRight">租户关联用户信息</div>
          <div class="section-context">
            <el-table :data="gvKubeUserData" style="width: 100%" @selection-change="handleSelectionChange">
              <el-table-column prop="username" label="用户名" width="170"></el-table-column>
              <el-table-column prop="roleType" label="角色" width="170">

                <template slot-scope="scope">
                  {{ getRoleTypeName(scope.row.roleType) }}
                </template>
              </el-table-column>
              <el-table-column prop="userStatus" label="状态" width="170">

                <template slot-scope="scope">
                  {{ getStatusName(scope.row.userStatus) }}
                </template>
              </el-table-column>
              <el-table-column prop="updateTime" label="创建时间" width="170"></el-table-column>
            </el-table>
          </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" size="small" @click="cancelUpdateTenant">取消</el-button>
          <el-button type="primary" size="small" @click="confirmUpdateTenant">确定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- <div class="delete-tenant">
      <div>
        <el-dialog title="删除租户" width="30%" :visible.sync="deleteTenantDialogVisible">
          <div style="color: red;">
            您确定要删除该租户吗
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" size="small" @click="cancelDeleteTenant">取消</el-button>
            <el-button type="danger" size="small" @click="confirmDeleteTenant">确定</el-button>
          </span>
        </el-dialog>
      </div>
    </div> -->
  </div>
</template>

<script>
export default {
  name: 'TenantManage',
  data() {
    return {
      tableData: [],
      userData: [],
      filteredUserData: [],
      showConnectUserData: [],
      showConnectClusterData: [], //租户关联集群信息
      showConnectClusterDetail: {},//编辑界面获取租户关联集群的具体信息
      clusterData: [], //集群信息
      multipleMainTenantSelection: [],
      multipleUserSelection: [],
      multipleClusterSelection: [],
      selectedIds: [],
      searchKeyword: '',
      addTenantDialogVisible: false,
      updateTenantDialogVisible: false,
      lookTenantDialogVisible: false,
      //deleteTenantDialogVisible: false,
      chooseClusterDialogVisible: false,
      chooseUserDialogVisible: false,
      addTenantForm: {
        "tenantName": "",
        "tenantDescription": "",
        "clusterId": "",
        "tenantCpu": "",
        "tenantMem": "",
        "ids": []
      },
      updateTenantForm: {
        "id": "",
        "tenantName": "",
        "tenantDescription": "",
        "clusterId": "",
        "tenantCpu": "",
        "tenantMem": "",
        "ids": []
      },
      // 租户分页信息
      tenantPagination: {
        total: 0,
        pageNum: 1,
        pageSize: 10
      },
      // 集群分页信息
      clusterPagination: {
        total: 0,
        pageNum: 1,
        pageSize: 10
      },
      // 用户分页信息
      userPagination: {
        total: 0,
        pageNum: 1,
        pageSize: 10
      },
      filterKey: '',
      //角色类型
      options: [{
        value: '选项1',
        label: '1'
      }, {
        value: '选项2',
        label: '2'
      }, {
        value: '选项3',
        label: '3'
      }, {
        value: '选项4',
        label: '4'
      }, {
        value: '选项5',
        label: '5'
      }],
      value: '',
      dialogWidth: '810px',
      tenantName: '',
      tenantDescription: '',
      cpuLimit: '',
      memoryLimit: '',
      cpuReserve: '',
      memoryReserve: '',
      tenantUserData: [
        { name: 'admin', role: '超级管理员', status: '审核通过', time: '2024年2月27日12:00:00', operator: '系统' },
        // 根据需要添加其他数据
      ],
      //保存被选中的集群
      selectedCluster: null,
      //编辑用户时获得的各个信息
      gvKubeTenantData: [],
      gvKubeClusterData: [],
      gvKubeUserData: [],
      //角色数字中文转换表
      roleTypeMap: {}
    };
  },
  methods: {
    //选中表格的行
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //表格选择项，获得选中的行的信息数组
    handleSelectionChange(val) {
      this.multipleMainTenantSelection = val;
      this.selectedIds = val.map(row => row.id); // 收集所有选中行的 id
    },
    //添加租户时处理集群选中项
    handleClusterSelectionChange(selection) {
      this.multipleClusterSelection = selection;
      this.selectedCluster = selection.length > 0 ? selection[0] : null;
      //console.log(this.selectedCluster)
      if (selection.length > 1) {
        this.$message('抱歉，您只能选择一条集群信息！')
        this.$refs.Table.clearSelection()
        //this.$refs.Table.toggleRowSelection(this.selectedCluster.pop())
      } else if (selection.length > 0) {
        this.addTenantForm.clusterId = this.selectedCluster.id
        this.updateTenantForm.clusterId = this.selectedCluster.id
      }
    },
    //添加租户时处理用户选中项
    handleUserSelectionChange(val) {
      //不能直接push进数组，这个val是一直动态变化的此刻选中的项！！！
      this.multipleUserSelection = val
    },
    getNamespaceData(cluster) {
      // 根据集群信息获取命名空间数据
    },
    // 展示命名空间信息时显示内容
    formatCpuLimitAndReserve(row) {
      console.log("row", row);
      return `${row.cpuLimit} / ${row.cpuReserve}`;
    },
    // 刷新功能函数
    handleRefresh() {
      this.fetchTenantData();
    },
    // 添加租户功能函数，弹出对话框
    handleAddTenant() {
      this.addTenantDialogVisible = true;
      this.addTenantForm = {  // 重置添加租户表单
        "tenantName": "",
        "tenantDescription": "",
        "clusterId": "",
        "tenantCpu": "",
        "tenantMem": "",
        "ids": []
      };
      this.updateTenantForm = {  // 重置添加租户表单
        "tenantName": "",
        "tenantDescription": "",
        "clusterId": "",
        "tenantCpu": "",
        "tenantMem": "",
        "ids": []
      };
      this.showConnectClusterData = []
      this.showConnectUserData = []
      this.gvKubeClusterData = []
      this.gvKubeUserData = []
      this.gvKubeTenantData = []
    },
    //添加租户时选择集群信息
    handleChooseClusterInfo() {
      this.chooseClusterDialogVisible = true
      this.fetchClusterData()
    },
    //添加租户时选择用户信息
    handleChooseUserInfo() {
      this.chooseUserDialogVisible = true
      this.fetchUserData()
      this.fetchRoleData()
    },
    //确认集群信息 将选择的集群信息添加到租户关联集群信息的表格中
    confirmChooseCluster() {
      this.chooseClusterDialogVisible = false
      this.fetchUserData()
      // this.showConnectClusterData = this.multipleUserSelection
      this.gvKubeClusterData = this.multipleClusterSelection.map(cluster => {
        // console.log("this.showConnectClusterData",this.showConnectClusterData);
        return {
          clusterZhname: cluster.clusterZhname,
          clusterDescription: cluster.clusterDescription,
          clusterUrl: cluster.clusterUrl,
          updateTime: cluster.updateTime,
          cpuLimit: this.updateTenantForm.tenantCpu || this.addTenantForm.tenantCpu, // 添加命名空间的 CPU 限制信息
          memoryLimit: this.updateTenantForm.tenantMem || this.addTenantForm.tenantMem,
        };
      });
      this.showConnectClusterData = this.gvKubeClusterData
    },
    //取消集群信息
    cancelChooseCluster() {
      this.addTenantForm.clusterId = ""
      this.addTenantForm.tenantCpu = ""
      this.addTenantForm.tenantMem = ""
      this.chooseClusterDialogVisible = false
    },
    //确认用户信息
    confirmChooseUser() {
      this.chooseUserDialogVisible = false
      this.fetchUserData()
      this.gvKubeUserData = this.multipleUserSelection
      this.showConnectUserData = this.multipleUserSelection
      this.addTenantForm.ids = this.showConnectUserData.map(row => row.id)
      this.updateTenantForm.ids = this.showConnectUserData.map(row => row.id)
    },
    //取消用户信息
    cancelChooseUser() {
      this.chooseUserDialogVisible = false
      this.addTenantForm.ids = []
      this.multipleUserSelection = []
    },
    // 确认添加租户
    confirmAddTenant() {
      //console.log(this.addTenantForm)
      if (this.addTenantForm.tenantName === "" || this.addTenantForm.clusterId === "" || this.addTenantForm.ids.length === 0) {
        this.$message('租户名称、集群信息、用户信息为必填项！')
      } else {
        //对象的方法调用并传递参数，url已经在对象的方法中定义了
        console.log("12345",this.addTenant);
        this.$tenantManageApi.addTenant(this.addTenantForm)
          .then(response => {
            this.addTenantDialogVisible = false;
            this.fetchTenantData();
            this.addTenantForm = {  // 重置添加租户表单
              "tenantName": "",
              "tenantDescription": "",
              "clusterId": "",
              "tenantCpu": "",
              "tenantMem": "",
              "ids": []
            };
            this.value = '';
            this.showConnectUserData = []
            this.showConnectClusterData = []
            this.gvKubeClusterData = []
            this.gvKubeUserData = []
            //this.$message('租户添加成功！')
          })
          .catch(error => {
            console.error(error);
          });
      }
    },
    // 取消添加租户
    cancelAddTenant() {
      this.addTenantDialogVisible = false;
      this.addTenantForm = {  // 重置添加租户表单
        "tenantName": "",
        "tenantDescription": "",
        "clusterId": "",
        "tenantCpu": "",
        "tenantMem": "",
        "ids": []
      };
      this.showConnectUserData = []
      this.showConnectClusterData = []
      this.gvKubeClusterData = []
      this.gvKubeUserData = []
    },
    // 确认更新租户
    confirmUpdateTenant() {
      if (this.selectedIds.length === 0) {
        this.$message('请先选择编辑哪一条租户信息！')
      } else {
        const params = {
          "id": this.selectedIds[0],
          "tenantName": this.updateTenantForm.tenantName,
          "tenantDescription": this.updateTenantForm.tenantDescription,
          "clusterId": this.updateTenantForm.clusterId,
          "tenantCpu": this.updateTenantForm.tenantCpu,
          "tenantMem": this.updateTenantForm.tenantMem,
          "ids": this.updateTenantForm.ids
        }
        //console.log(params)
        this.$tenantManageApi.updateTenant(params)
          .then(response => {
            this.updateTenantDialogVisible = false;
            this.fetchTenantData();
            this.updateTenantForm = {  // 重置添加租户表单
              "id": "",
              "tenantName": "",
              "tenantDescription": "",
              "clusterId": "",
              "tenantCpu": "",
              "tenantMem": "",
              "ids": []
            };
            this.showConnectUserData = []
            this.showConnectClusterData = []
            this.gvKubeClusterData = []
            this.gvKubeUserData = []
            //this.$message('租户编辑成功！')
          })
          .catch(error => {
            console.error(error);
          });

      }
    },
    // 取消更新租户
    cancelUpdateTenant() {
      this.updateTenantDialogVisible = false;
      this.updateTenantForm = {  // 重置添加租户表单
        "id": "",
        "tenantName": "",
        "tenantDescription": "",
        "clusterId": "",
        "tenantCpu": "",
        "tenantMem": "",
        "ids": []
      };
      this.showConnectUserData = []
      this.showConnectClusterData = []
      this.gvKubeClusterData = []
      this.gvKubeUserData = []
    },
    // 确认删除租户
    confirmDeleteTenant() {
      this.$confirm('此操作将永久删除该租户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$tenantManageApi.deleteTenant(this.selectedIds)
          .then(response => {
            this.fetchTenantData();
            this.deleteTenantDialogVisible = false;
          })
          .catch(error => {
            console.error(error);
          });
      })
    },
    // 取消删除租户
    cancelDeleteTenant() {
      //this.deleteTenantDialogVisible = false;
    },
    // 搜索功能函数
    handleSearch() {
      this.tenantPagination.pageNum = 1;  // 搜索时重置页码
      this.fetchTenantData();
    },
    // 分页获取租户数据
    fetchTenantData() {
      this.$tenantManageApi.pageGetTenantInfo({
        filterKey: this.searchKeyword,
        pageSize: this.tenantPagination.pageSize,
        pageNum: this.tenantPagination.pageNum
      })
        .then(response => {
          this.tableData = response.data.records;
          //console.log('222222222', response)
          // 更新分页信息
          this.tenantPagination.total = response.data.total;
          this.tenantPagination.pageSize = response.data.size;
        })
        .catch(error => {
          console.error(error);
        });
    },
    // 分页获取所有集群信息
    fetchClusterData() {
      this.$clusterManageApi.pageGetCluster({
        filterKey: "",
        pageSize: this.clusterPagination.pageSize,
        pageNum: this.clusterPagination.pageNum
      }).then(res => {
        if (res && res.code === 200) {
          this.clusterData = res.data.records
          this.clusterPagination.total = res.data.total
          this.clusterPagination.pageSize = res.data.size
        }
      }).catch(err => {
        console.log(err)
      })
    },
    //获取集群详细信息
    getClusterDetail(id) {
      this.$clusterManageApi.getClusterDetail(id)
        .then(res => {
          if (res && res.code === 200) {
            this.showConnectClusterDetail = res.data
            //console.log(this.showConnectClusterDetail)
          }
        }).catch(err => {
          console.log(err)
        })
    },
    // 分页获取用户数据
    fetchUserData() {
      this.$userManageApi.pageGetUserInfo({
        filterKey: "",
        pageSize: this.userPagination.pageSize,
        pageNum: this.userPagination.pageNum
      })
        .then(response => {
          this.userData = response.data.records;
          //console.log(11111111111, this.userData)
          this.filteredUserData = this.userData.filter(user => user.username !== 'superadmin');
          // 更新分页信息
          this.userPagination.total = response.data.total;
          this.userPagination.pageSize = response.data.size;
        })
        .catch(error => {
          console.error(error);
        });
    },
    handleTenantPageChange(pageNum) {
      this.tenantPagination.pageNum = pageNum;
      this.fetchTenantData();
    },
    handleUserPageChange(pageNum) {
      this.userPagination.pageNum = pageNum;
      this.fetchUserData();
    },
    handleClusterPageChange(pageNum) {
      this.clusterPagination.pageNum = pageNum;
      this.fetchClusterData();
    },
    handleCommand(command) {
      if (command === "update") {
        this.handleUpdateTenant()
      } else if (command === "delete") {
        this.handleDeleteTenant(this.selectedIds)
      } else {
        this.handleLookTenant()
      }
    },
    ifChooseRow(row) {
      //console.log(row)
      //先清空不然会存在删几条的情况
      this.selectedIds = []
      this.selectedIds.push(row.row.id)
      this.updateTenantForm.id = row.row.id
      this.updateTenantForm.tenantName = row.row.tenantName
      this.updateTenantForm.tenantDescription = row.row.tenantDescription
      this.updateTenantForm.clusterId = row.row.clusterId
      this.updateTenantForm.tenantCpu = row.row.tenantCpu
      this.updateTenantForm.tenantMem = row.row.tenantMem
      //调接口以展示租户关联集群信息
      //this.getClusterDetail(this.updateTenantForm.clusterId)
      //console.log(this.selectedIds[0])
    },
    //编辑用户接口
    editTenant() {
      this.$tenantManageApi.editTenant(this.selectedIds[0])
        .then(res => {
          if (res && res.code === 200) {
            //console.log(res.data)
            this.gvKubeClusterData = []
            this.gvKubeTenantData = []
            this.gvKubeUserData = []
            this.gvKubeClusterData.push(res.data.gvKubeCluster)
            this.gvKubeClusterData[0].cpuLimit = res.data.gvKubeTenant.tenantCpu
            this.gvKubeClusterData[0].memoryLimit = res.data.gvKubeTenant.tenantMem
            this.gvKubeTenantData.push(res.data.gvKubeTenant)
            this.gvKubeUserData = res.data.gvKubeUserList
          }
        })
        .catch(err => console.log(err))
    },
    // 删除租户
    handleDeleteTenant(ids) {
      //this.deleteTenantDialogVisible = true
      this.confirmDeleteTenant()
    },
    handleLookTenant() {
      // 查看租户信息
      this.lookTenantDialogVisible = true
      this.editTenant()
      this.fetchRoleData()
    },
    // 编辑更新租户
    handleUpdateTenant() {
      if (this.multipleMainTenantSelection.length > 1) {
        this.updateTenantDialogVisible = false
        this.$message('抱歉，同时只能更新一条租户信息！')
      } else {
        this.updateTenantDialogVisible = true
        this.editTenant()
        this.fetchRoleData()
      }
    },
    // 更新租户状态
    handleUpdateStatus(ids, status) {
      this.$tenantManageApi.updateTenantStatus({ ids, status })
        .then(response => {
          this.fetchTenantData();
        })
        .catch(error => {
          console.error(error);
        });
    },
    //选择租户角色
    changeRoleType(val) {
      this.addTenantForm.roleType = val
    },
    // 删除
    deleteSelectedRow() {
      this.confirmDeleteTenant()
    },
    //获取用户角色信息
    fetchRoleData() {
      this.$userManageApi.getAllRole().then(res => {
        if (res && res.code === 200) {
          //使用数组的reduce方法来从数组对象中提取值并创建一个新的映射对象
          // 使用reduce方法提取id和name，构建roleTypeMap对象
          this.roleTypeMap = res.data.reduce((accumulator, role) => {
            // 将role对象的id作为属性，name作为值，添加到累加器对象中
            accumulator[role.id] = role.name;
            return accumulator;
          }, {}); // 初始化累加器为空对象
          // 输出结果
          //console.log(this.roleTypeMap);
        }
      }).catch(err => {
        console.log(err)
      })
    },
    //获取用户角色数字->中文的映射表
    getRoleTypeName(roleType) {
      //scope.row.roleType 表示当前行的 roleType 属性的值
      return this.roleTypeMap[roleType] || '未知角色';
    },
    //获取用户状态数字->中文的映射表
    getStatusName(userStatus) {
      // 0是启用，1是禁用
      const statusMap = {
        0: '启用',
        1: '禁用'
      }
      return statusMap[userStatus] || '未知状态'
    },
  },
  //在mounted中进行异步操作使用nextTick，不然mounted中会因为组件未完全渲染就已经执行操作而报错
  mounted() {
    this.$nextTick(() => {
      this.fetchTenantData();
    })
  }
};
</script>

<style scoped>
.section-context .section-context-align {
  margin-right: 19px;
}

.tenant-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  background: #eff4f9;
  ;
  background-size: cover;
  padding: 20px;
  height: 92vh;
  margin-bottom: 10px;
}

.tenant-header {
  width: 100%;
  height: 100px;
  margin-top: 6px;
  background-color: #fff;
  border-radius: 20px;
}

.title {
  display: inline-block;
  vertical-align: top;
  font-weight: 600;
  font-size: xx-large;
  padding: 20px;
}

.title-content {
  color: #888888;
  padding-top: 10px;
  font-size: small;
}

.tenant-operate {
  background-color: #f9fbfd;
  padding: 10px 0;
}

.keyword {
  padding-left: 10px;
}

.tenant-info {
  margin-top: 10px;
}

.right-menu {
  display: inline;
  float: right;
  margin-right: 10px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.upload {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.uploadDiv {
  padding-left: 14px;
}

.el-icon-arrow-down {
  font-size: 12px;
}

::v-deep .el-input {
  width: 26%;
  border-radius: 6px;
  margin-right: 4px;
}

::v-deep .el-image {
  margin-left: 20px;
}

::v-deep .el-input--suffix {
  width: 50%;
}

::v-deep .el-table thead {
  font-size: initial;
  color: #606266;
  font-weight: 500;
}

::v-deep .el-button {
  border-radius: 10px;
  display: inline-block;
}

::v-deep .el-upload {
  display: block;
}

.dialog-title {
  font-size: 1.5em;
}

.dialog {
  width: 80%;
  max-width: 800px;
  margin: auto;
}

.form {
  text-align: center;
  margin-top: -30px;
}

.section-title {
  font-size: 1.3em;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: left;
}

.moveRight {
  margin-left: 12px;
}

.moveLeft {
  /* margin-left: -10px; */
}

.secondSection-title {
  font-size: 1.2em;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: left;
}

.section-context {
  margin-left: 40px;
  text-align: center;
  padding-right: 10px;
}

.input {
  width: 80%;
  height: 80%;
  text-align: left;
}

.el-form-item {
  font-size: 0.8em;
}

.dialog-button {
  position: relative;
  left: 10px;
  display: flex;
  justify-content: space-around;
  margin: 22px
}

.dialog-footer {
  display: flex;
  margin-top: 20px;
  margin-bottom: 5px;
  justify-content: right;
}

.dialog-add {
  display: flex;
  align-items: center;
  justify-content: center
}</style>